<!-- 文章详情 文章区域 -->
<template>
  <div class="main-area">
    <div class="article-area">
      <div class="article">
        <!-- 标题 -->
        <h1 class="article-title">魔幻的2022上阕：骑脸被痛殴🥺，还得仰卧起坐</h1>
        <div class="author-info-block">
          <a href="#">
            <img src="https://p6-passport.byteacctimg.com/img/user-avatar/4dc7a8e7c4eff9e00a99a907f23bc1d1~200x200.image" class="avatar" alt="">
          </a>
          <!-- 作者信息 -->
          <div class="author-info-box">
            <div class="author-name">玛卡巴卡队 <span><img style="width:35px; height:16px" src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/lv-5.d08789d.png" alt=""></span></div>
            <div class="meta-box">
              <time>2022年07月06日 10:35</time>
              <span class="views-count"> ·&nbsp;&nbsp;阅读 4477</span>
            </div>
          </div>
          <button class="follow-button">
            <span class="icon-follow">+</span>
            <span>关注</span>
          </button>
        </div>

<!-- 正文 -->
        <div class="markdown-body">
          <p>「时光不负，创作不停，本文正在参加<a href="https://juejin.cn/post/7108989863126368286"
              title="https://juejin.cn/post/7108989863126368286" target="_blank">2022年中总结征文大赛</a>」</p>
          <blockquote>
            <p>2022其实并不太快乐，四面八方的焦虑和压力。公司前端技术框架调整也让我懵了一阵子。</p>
          </blockquote>
          <blockquote>
            <p>但我还是选择不躺平。</p>
          </blockquote>
          <h2 id="heading-0">一、野望与现实：不如意者十八九</h2>
          <p>大概半年前，我初入掘金社区，写了一篇半年总结：<a href="https://juejin.cn/post/7037697537943273479" target="_blank"
              title="https://juejin.cn/post/7037697537943273479">《【卷王的2021】前端：从995到965且涨薪40+%？》</a> ;</p>
          <p>那是2021年底，我毫不掩饰地向大家分享我获得 <strong>965</strong> 作息的欣喜。</p>
          <blockquote>
            <p>甚至还被前公司 <code>Leader</code> 分享到前公司小群小范围传播了一下……大型社死现场🤣。</p>
          </blockquote>
          <p>除此之外，我还分享了到新公司之后对当前技术栈进行的一些举措和计划：</p>
          <p>很显然，当是时，我满心期待，准备大干一场。</p>
          <p>那么结果怎么样呢？</p>
          <p>一言忒么难尽……</p>
          <h2 id="heading-1">1.1 我负责 <strong>升级的 <code>Vue3</code></strong> 怎么样了？</h2>
          <p>去年总结时，说到我主导将公司的 <code>Vue2</code> 框架升级技术 <code>Vue3</code>；</p>
          <p>结果怎么样：</p>
          <p><strong>公司放弃 <code>Vue</code> 投奔 <code>React</code> 了！！！</strong> 🤣</p>
          <p>尽管我们当时因为领导一句话，头铁升了 <code>Vue3</code>，顶着 <code>Element-Plus</code> 的 <code>alpha</code> 版本的不稳定和
            <code>bug</code> 顽强地交付业务……</p>
          <p>但这并没有什么卵用；</p>
          <p>因为公司甚至连 <code>Vue2</code> 也不用了。</p>
          <p>事情是这样的：</p>
          <p>我司当初分了两个事业部，两部技术栈互不相同，一边是 <code>Vue</code>，一边是 <code>React</code>；我就是在这种前提下入职并升级 <code>Vue3</code> 的。</p>
          <p>然后公司迎来了一位大厂下来的大 <code>Boss</code>，非常有魄力地整合了所有研发资源，“车同轨、书同文……”。</p>
          <p>然后就涉及到，公司以后到底是用 <code>Vue</code> 还是用 <code>React</code> 的原因。</p>
          <p>因此有了一轮非常激烈的选型辩论。</p>
          <p>没错，结果就是： <strong>我们辩论输了</strong>；</p>
          <p><code>React</code> 凭借它在大厂中主导的地位，以微弱的优势取得了胜利；</p>
          <blockquote>
            <p>也是天时不遂祖师爷，我们辩论那会儿，<code>Element-Plus</code> 还没正式发布，<code>Vue 3.x</code> 也还存在一些影响使用的 <code>Bug</code>……
            </p>
          </blockquote>
          <p>如果现在再来一轮，我觉得<code>Vue</code> 也许能赢……</p>
          <p>总之，辩论输了，<code>Vue</code> 没了。</p>
          <p>除了存量项目的维护之外，所有新开项目原则上都要采用 <code>React</code> + <code>Antd</code> 那套；</p>
          <p>尤祖师爷，我真的尽力了啊……</p>
          <h2 id="heading-2">1.2 搭建的 <strong>前端组件库</strong> 、<strong>编码规范</strong> 咋样了？</h2>
          <p>去年总结时，我提到了我在搭建公司的前端组件库、编码规范等技术输出；</p>
          <p>它还有价值吗？</p>
          <p><strong>几乎没有了！</strong></p>
          <p>原因不用我多说了吧……</p>
          <p><code>Vue</code> 被打入冷宫，那依附于 <code>Vue3</code> + <code>Element Plus</code> 的二开组件库、代码规范啥的，结果命中注定……</p>
          <h2 id="heading-3">1.3 我搭的 <strong>私有 <code>Npm</code> 源</strong> 呢？</h2>
          <p>去年总结时，我说我在给公司搭 "私有 <code>Npm</code>"；</p>
          <p>还有人在用它吗？</p>
          <p><strong>哈哈，还在用！</strong></p>
          <p>虽然当时搭建它是纯粹为了 <strong>Vue前端组件库</strong>。</p>
          <p>虽然是我在某个以 <code>maven</code> 开头的公司子域名下，蹭了服务端同学申请的 <code>Nexus</code> 资源。</p>
          <p>虽然中间还经历了一次痛苦不堪，翻车频频的服务迁移。</p>
          <p>但它居然 —— 活了下来！</p>
          <p>并且越来越多的前端组件和业务接入其中……这也算是因缘际会，无心成柳了吧。</p>
          <h2 id="heading-4">1.4 总之</h2>
          <p>总之，我 <strong>去年12月初</strong> 满心欢喜准备的 <strong>大展拳脚</strong>，以一种诡异的方式完成了自我消解；</p>
          <p>相对应的，我开始学习 <code>React</code>，了解它的生态，准备以一个 “新人” 的方式重新融入公司的技术环境。</p>
          <p>雄心壮志消解了大半。</p>
          <p>那么 —— 我是否真的躺平了？</p>
          <p>很可惜：<strong>没完全躺平</strong> 。</p>
          <p><strong>没完全躺平</strong> 的意思是：我又卷起来了。</p>

          <pre><code>
import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'
export default {
  name: 'Article',
  created(){
    that.$nextTick(function() {
        const block = document.querySelectorAll('pre code')
      console.log(block);
      hljs.configure({ useBR: true });
      block.forEach((el) => {
        hljs.highlightBlock(el)
      })
      });
  },
  data() {
    return {
    }
  }
}
          </code></pre>

          <p>我是<code>春哥</code>。<br>
            大龄前端打工仔，依然在努力学习。<br>
            我的目标是给大家分享最实用、最有用的知识点，希望大家都可以早早下班，并可以飞速完成工作，淡定摸鱼🐟。</p>
          <p>你可以在<strong>公众号</strong>里找到我：<code>前端要摸鱼</code>。</p>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'
export default {
  name: 'Article',
  created(){
    this.$nextTick(function() {
        const block = document.querySelectorAll('pre code')
      console.log(block);
      hljs.configure({ useBR: true });
      block.forEach((el) => {
        hljs.highlightBlock(el)
      })
      });

  },
  data() {
    return {
    }
  }
}
</script>

<<<<<<< 完善主页面右侧滚动

<style  scoped>
code{
  background-color: rgba(225, 225, 225, 0.6);
  width: 100%;
}

.main-area {
  position: relative;
  width: 820px;
  max-width: 100%;
  box-sizing: border-box;
}

.main-area>* {
  border-radius: 4px;
  background-color: #fff;
  padding-left: 2.67rem;
  padding-right: 2.67rem;
  box-sizing: border-box;
}

.article {
  position: relative;
  padding-top: 32.004px;
  padding-bottom: 39.96px;
  z-index: 1;
}

.article-title {
  margin: 0 0 20.004px;
  font-size: 32.004px;
  font-weight: 600;
  line-height: 1.31;
  color: #252933;
}

.author-info-block {
  display: flex;
  align-items: center;
}

.author-info-block .avatar {
  flex: 0 0 auto;
  margin-right: 1rem;
  width: 3.333rem;
  height: 3.333rem;
  border-radius: 50%
}

.author-name {
  height: 24px;
  display: flex;
  align-items: center;
}

.author-name span{
    margin-left: 3px;
    display: flex;
    cursor: pointer;
  }

.author-info-box {
  min-width: 0;
  flex-grow: 1;
  flex: 1;
  min-height: 43px;
}

.follow-button {
  margin: 0 0 0 auto;
  padding: 0 1rem;
  height: 34px;
  font-size: 14px;
  color: #1e80ff;
  background: rgba(30, 128, 255, .05);
  border: 1px solid rgba(30, 128, 255, .3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.5s ease;
}

.follow-button:hover {
  border-color: rgba(30, 128, 255, .45);
  background: rgba(30, 128, 255, .1);
}

.follow-button .icon-follow {
  /* background: url(//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/85a1a2e….svg) 0 0 no-repeat; */
  /* margin-right: 4px;
    display: inline-block;
    width: 12px;
    height: 12px; */
}
</style>
